<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-03-20 22:04:11
 * @LastEditTime: 2024-03-20 22:31:29
 * @FilePath: \env-manager-pc\src\views\dashboard\qiye\yongdianliang.vue
-->
<!--
 * @Author: weikang
 * @Description:
 * @Date: 2023-12-22 22:15:35
 * @LastEditTime: 2024-03-20 21:39:52
 * @FilePath: \env-manager-pc\src\views\dashboard\huanjing\yongdianliang.vue
-->
<script setup lang="ts">
import * as Echarts from 'echarts'
import dayjs from 'dayjs'
import useUserStore from '@/store/modules/user'
import dataQueryApi from '@/api/modules/data.query'

const userStore = useUserStore()
const loading = ref(false)
const times = ref([])

async function getData(time: string) {
  loading.value = true
  const res = await dataQueryApi.GetEnterpriseElecEveryday({
    objFilter: {
      Type: 'DIM.Units.Filters.GUIDFilter',
      Value: [
        userStore.userInfo.AffiliatedObjId,
      ],
    },
    pageSize: 1,
    pageNum: 1,
    startTime: dayjs(time).subtract(30, 'day').format('YYYYMMDD'),
    endTime: dayjs(time).format('YYYYMMDD'),
  })
  loading.value = false
  const { Rows, Dates } = res as any
  times.value = Dates
  const tableData = Rows[0].Electricitys
  return tableData
}

const today = ref([])
const yesterday = ref([])

const option = computed(() => {
  const legendData = [`同期`, `本期`]

  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      top: '10%',
      left: '2%',
      right: 30,
      bottom: '5%',
      containLabel: true,
    },
    legend: {
      icon: 'rect',
      right: 'center',
      top: '2%',
      itemWidth: 7, // 设置宽度
      itemHeight: 7, // 设置高度
      itemGap: 15, // 设置间距
      textStyle: { // 图例文字的样式
        color: '#89BFE5',
        fontSize: 12,
      },
    },
    xAxis: {
      boundaryGap: true,
      data: times.value,
    },
    yAxis: [{
      name: '单位：kW',
      // type: "value",
      inverse: false,
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(117, 168, 202, 0.3)',
          type: 'dashed',
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#0A5C95',
        },
      },
    }],
    series: [
      {
        name: legendData[0],
        type: 'line',
        symbol: 'circle', // 设定为实心点
        showAllSymbol: true,
        symbolSize: 5,
        smooth: true,
        itemStyle: {
          normal: {
            color: `#F56C6C`,
            lineStyle: { // 线的颜色
              color: `#F56C6C`,
              width: 1.5,
            },
            areaStyle: {
              // type: 'default',
              // 旧版渐变色实现
              // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, //变化度
              //    //三种由深及浅的颜色
              //    [{
              //       offset: 0,
              //       color: 'rgba(1, 180, 255, 0.2)'
              //    }, {
              //       offset: 1,
              //       color: 'rgba(1, 180, 255, 0.1)'
              //    }])

              // 新版渐变色实现
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(245, 108, 108, 0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(245, 108, 108, 0.1)',
                  },
                ],
              },
            },
          },
        },
        data: yesterday.value,
      },
      {
        name: legendData[1],
        type: 'line',
        symbol: 'circle', // 设定为实心点
        showAllSymbol: true,
        symbolSize: 5,
        smooth: true,
        itemStyle: {
          normal: {
            color: `#409EFF`,
            lineStyle: { // 线的颜色
              color: `#409EFF`,
              width: 1.5,
            },
            areaStyle: {
              // 旧版渐变色实现
              // type: 'default',
              // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, //变化度
              //    //三种由深及浅的颜色
              //    [{
              //       offset: 0,
              //       color: 'rgba(255, 223, 4, 0.2)'
              //    }, {
              //       offset: 1,
              //       color: 'rgba(255, 223, 4, 0.1)'
              //    }])
              // 新版渐变色实现
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(64, 158, 255, 0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(64, 158, 255, 0.1)',
                  },
                ],
              },
            },
          },
        },
        data: today.value,
      },
    ],
  }
})

const chartRef = ref<any>()
let chart: any = null
onMounted(() => {
  chart = Echarts.init(chartRef.value)
  window.addEventListener('resize', () => {
    chart.resize()
  })
})

async function getAllData() {
  await getData(dayjs().format('YYYYMMDD')).then((res) => {
    today.value = res
  })
  await getData(dayjs().subtract(30, 'day').format('YYYYMMDD')).then((res) => {
    yesterday.value = res
  })
  chart.setOption(option.value)
}
getAllData()
</script>

<template>
  <PageMain title="最近30天用电量">
    <div ref="chartRef" class="h-[30vh] min-h-[300px] w-full overflow-hidden" />
  </PageMain>
</template>
